<template>
  <div class="u-page tpink-page-bgcolor">
    <u-navbar :is-back="false" :background="background" :border-bottom="false">
      <view class="slot-wrap">
        <u-tabs :list="Navbar.list" :is-scroll="false" inactive-color="#a2a0a1" active-color="#eb5468"
                bg-color="#f1d7e0" bar-height="10"
                :active-item-style="Navbar.bar" item-width="190" bar-width="180"></u-tabs>
      </view>
    </u-navbar>
    <div class="tpink-page-top-bgcolor">
      <div class="u-flex u-pt-15 u-pb-10 u-pl-10 u-pr-10">
        <div class="search-width">
          <u-search :placeholder="hotText" v-model="keyword" :show-action="false" shape="square" bg-color="#fffdfe"
                    @search="search"></u-search>
        </div>
      </div>
    </div>
    <div>
      <!-- 轮播图 -->
      <div>
        <u-swiper :list="JobShopsalesAds" v-if="JobShopsalesAds.length > 0" height="365" border-radius="0"
                  @click="clickSwiper"></u-swiper>
      </div>
      <div class="u-pt-10">
        <div style="font-weight: bold;width: 95%;margin: 0 auto;">
          <u-tabs :list="categoryTreeList" bg-color="#fef2f6" :show-bar="false" active-color="#444444"
                  inactive-color="#6b6969"
                  :active-item-style="{fontSize:'44rpx'}" height="100" font-size="30" gutter="15" :current="current"
                  @change="change"></u-tabs>
          <div class="u-flex u-scroll-x" style="margin-left: 15rpx;margin-right: 15rpx;padding-bottom: 10rpx;">
            <div v-for="(item,index) in categoryTreeList[current].children" :key="index">
              <u-tag :text="item.name" mode="dark" :bg-color="item.checked?'#eb5468':'#f3f2f3'"
                     :color="item.checked?'#ffffff':'#797878'" @click="selectTag(item)"/>
            </div>
          </div>
        </div>
      </div>
      <div class="aui-list-box u-pl-5 u-pr-5" v-if="courseList && courseList.length>0">
        <a href="javascript:;" class="aui-list-item" v-for="(item,index) in courseList" :key="index"
           @click="toDetails(item)">
          <div class="aui-list-theme-img">
            <u-image width="100%" height="200rpx" :src="item.mainDiagram"></u-image>
          </div>
          <div class="aui-list-theme-message">
            <div class="u-flex line-ellipsis">
              <h3 class="aui-list-theme-title title-name">{{ item.title }}</h3>
            </div>
            <div class="u-flex u-pb-5" style="justify-content: space-between;">
              <div class="u-pb-5" v-if="item.tags && item.tags.split(',').length>0">
                <u-tag
                    v-for="(titem, tindex) in item.tags.split(',').slice(0, 2)"
                    :key="tindex"
                    :text="titem"
                    type="info"
                    mode="dark"
                    size="mini"
                    color="#eb5468"
                    bg-color="#fff3f3"
                    style="font-size: 10rpx !important;"
                ></u-tag>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="u-text-center" style="padding-top: 20%;" v-else>
        <u-empty text="暂无搜索结果" mode="data"></u-empty>
      </div>
    </div>
	<!-- 公告 -->
	<Notice ref="noticeModule"></Notice>
  </div>
</template>

<script>
import globalData from "@/globalData";
import shareMixins from '@/mixins/share';

export default {
  mixins: [shareMixins],
  data() {
    return {
      hotText: '请输入关键词',
      keyword: '',
      searchStr: '',
      pageNum: 1,
      pageSize: 10,
      title: '学习',
      category: '',
      Navbar: {
        list: [
          {
            name: '玫丽学习'
          }
        ],
        bar: {
          color: '#34292d',
          fontSize: '46rpx'
        },
        background: {
          background: '#f3e4e9'
        }
      },
      background: {
        backgroundColor: '#f1d7e0'
      },
      courseList: [],
      JobShopsalesAds: [],
      categoryTreeList: [],
      shareRoute: '',
      shareData: {
        docUnid: '',
        url: '',
        style: 9,
        type: 2,
        route: '',
        posterData: {},
        imageUrl: ''
      },
      current: 0
    };
  },
  onLoad(options) {
    this.getCategoryTree();
    this.getAds();
    this.getCourseList();
  },
  onShow() {
	  this.reloadNotice()
  },
  onPullDownRefresh() {
    this.pageNum = 1
    this.getCourseList()
    this.getAds();
    setTimeout(() => {
      // 停止Loading
      uni.stopPullDownRefresh()
    }, 1000)
  },

  onReachBottom() {
    this.pageNum += 1
    this.getCourseList()
  },

  methods: {
    /**
     * 获取分类树形结构
     */
    async getCategoryTree() {
      let result = await this.$u.api.unifyMiniRestGet({
        systemid: "meily",
        url: "/course/category/tree/list",
      });
      if (result.code == 200) {
        this.categoryTreeList = result.data;
        this.categoryTreeList = [{name: '为你推荐'}, ...this.categoryTreeList]
        for (let i = 1; i < this.categoryTreeList.length; i++) {
          this.categoryTreeList[i].children = [{name: '全部', checked: true}, ...this.categoryTreeList[i].children]
        }
      }
    },
    /**
     * 获取广告图
     */
    async getAds() {
      let result = await this.$u.api.unifyMiniRest({
        systemid: "meily",
        url: "/config/list",
        configType: "course"
      });
      if (result.code == 200) {
        let rows = result.rows
        if (rows.length > 0) {
          this.JobShopsalesAds = [];
          console.log(rows)
          for (const i in rows) {
            if (rows[i].configKey == 'course') {
              let obj = {image: rows[i].imageLink.split(",")[0], link: rows[i].configLink, source: rows[i].configFrom}
              this.JobShopsalesAds.push(obj)
            }
          }
        }
      }
    },
    /**
     * 点击轮播图跳转
     */
    clickSwiper(index) {
      this.routeAD(this.JobShopsalesAds[index].link, this.JobShopsalesAds[index].source)
    },
    jumpAddress(address) {
      this.routeAD(address, 'applet')
    },
    async getCourseList() {
      let result = await this.$u.api.unifyMiniRestGet({
        systemid: "meily",
        url: "/learning/course/page/list",
        searchStr: this.searchStr,
        status: 0,
        category: this.category,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
      });
      if (result.code == 200) {
        if (this.pageNum != 1) {
          this.courseList = this.courseList.concat(result.rows);
        } else {
          this.courseList = result.rows;
          if (this.courseList.length > 0) {
            this.hotText = "大家都在搜" + this.courseList[0].title;
          }
        }
      }
    },
    search() {
      this.pageNum = 1
      this.searchStr = this.keyword
      this.getCourseList();
    },

    /**
     * 跳转到详情
     */
    async toDetails(item) {
      this.$u.route('/pages_private_scene1/CourseZone/CourseDetail?id=' + item.id);
    },
    /**
     * 隐藏文字 使用...代替
     */
    hideStr(str, num) {
      if (this.isNotNull(str)) {
        if (str.length > num) {
          return str.substring(0, num) + '...';
        } else {
          return str;
        }
      } else {
        return '';
      }
    },
    change(index) {
      if (this.current !== index) {
        this.current = index;
        if (this.current !== 0) {
          this.category = this.categoryTreeList[this.current].name
        } else {
          this.category = ''
        }
        this.pageNum = 1
        this.getCourseList()
      }
    },
    /**
     * 选中子分类
     */
    selectTag(item) {
      if (!item.checked) {
        for (const i in this.categoryTreeList[this.current].children) {
          if (this.categoryTreeList[this.current].children[i].name == item.name) {
            this.categoryTreeList[this.current].children[i].checked = true
          } else {
            this.categoryTreeList[this.current].children[i].checked = false
          }
        }
        if (this.current != 0) {
          this.category = item.name === '全部' ? this.categoryTreeList[this.current].name : (this.categoryTreeList[this.current].name + '-' + item.name)
        } else {
          this.category = ''
        }
        this.pageNum = 1
        this.getCourseList()
      }
    },
  },
};
</script>

<style scoped>
page {
  background-color: #fef2f6;
}

.title-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 70rpx;
}

.search-width {
  width: 100%;
}

.aui-list-box {
  overflow: hidden;
  position: relative;
}

.aui-list-item {
  width: 47%;
  float: left;
  margin: 0 0 2% 2%;
  background: #fef2f6;
  display: block;
  overflow: hidden;
  /*box-shadow: 5rpx 5rpx 5rpx 5rpx #f3f2f2eb;*/
  border-radius: 10rpx;
}

.aui-list-theme-img {
  height: auto;
  width: 100%;
  position: relative;
}

.aui-list-theme-img img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

.aui-list-theme-message {
  background: #ffffff;
  padding: 0rpx 10rpx;
}

.aui-list-theme-title {
  color: #4a4a4a;
  font-size: 30rpx;
  line-height: 35rpx;
  margin-top: 5rpx;
}

.aui-list-theme-message p {
  /*color: #ff3b52;*/
  font-size: 24rpx;
  font-weight: bold;
}

.aui-list-theme-message span.line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
  text-decoration: line-through;
}

.aui-list-theme-message span.none-line-through {
  font-size: 0.7rem;
  color: #919191;
  padding: 0 0.2rem;
}

.aui-list-theme-message p i {
  font-style: normal;
  font-size: 0.7rem;
  padding: 0 0.2rem;
  color: #ff3b52;
  float: right;
  width: 25px;
  height: 25px;
}

.aui-list-theme-message p em {
  font-style: normal;
  font-size: 0.7rem;
  color: #ff3b52;
  text-decoration: line-through;
  font-weight: normal;
}


/* 两行或多行显示... */
.line-ellipsis {
  width: 320rpx;
  height: 95rpx;
  white-space: pre-line;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-align: justify;
}


.slot-wrap {
  display: flex;
  align-items: center;
  /* 如果您想让slot内容占满整个导航栏的宽度 */
  flex: 1;
  /* 如果您想让slot内容与导航栏左右有空隙 */
  padding: 0 30rpx;
}

.sales-volume {
  color: #b7b7b7;
  font-size: 22rpx;
}

</style>
